<template>
  <div class="bgbg" v-if="Isshow">
    <div class="z4">
      <div class="closediv" @click="closeshow"></div>
      <div class="title">变形监测-{{ data.code }}</div>
      <div class="bodyt">
        <div class="time">
          <!-- <el-select class="select" v-model="data.select" placeholder="月">
            <el-option label="时" value="4"></el-option>
            <el-option label="天" value="3"></el-option>
            <el-option label="月" value="2"></el-option>
            <el-option label="年" value="1"></el-option>
          </el-select> -->
          <el-date-picker
            class="date"
            v-model="data.value1"
            type="daterange"
            start-placeholder="Start date"
            range-separator="——"
            end-placeholder="End date"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            date-format="YYYY-MM-DD"
          />
          <el-button color="#46A5D9" @click="resetview">搜索</el-button>
        </div>
        <div class="echarts">
          <MyCharts
            v-if="datashow"
            :dataSource="data.dataSource"
            canvasWidth="100%"
            canvasHeight="100%"
          ></MyCharts>
          <h1 style="text-align: center" v-else>暂无数据</h1>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Getshenyaji, getshenyajilist, getbxjcX, getbxjcY } from "@/api/index";
import MyCharts from "@/components/echarts/index.vue";
import { dataTool } from "echarts";
import { ref, reactive, onMounted } from "vue";
import moment from "moment";
let Isshow = ref(false);
let datashow = ref(true);
const data = reactive({
  value1: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")],
  select: "3",
  code: "0+116",
  dataSource: {
    title: {
      show: false,
      text: "Rainfall and Flow Relationship",
      left: "center",
    },
    grid: {
      bottom: "18%",
      top: "18%",
    },

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "#505765",
        },
      },
    },
    legend: {
      data: ["水平位移x", "水平位移y"],
      left: "center",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: { onZero: false },
        nameTextStyle: {
          color: "#ffffff",
          // verticalAlign: "",
          //   padding: [-5, 50, 0, 0],
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            width: 2,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: "dashed",
            color: "#3B3F37",
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
        data: [
          "5-1",
          "5-2",
          "5-3",
          "5-4",
          "5-5",
          "5-6",
          "5-7",
          "5-8",
          "5-9",
          "5-10",
          "5-11",
          "5-12",
          "5-13",
          "5-14",
          "5-15",
          "5-16",
          "5-17",
          "5-18",
          "5-19",
          "5-20",
          "5-21",
          "5-22",
          "5-23",
          "5-24",
          "5-25",
          "5-26",
          "5-27",
          "5-28",
          "5-29",
          "5-30",
          "5-31",
        ],
      },
    ],
    yAxis: [
      {
        name: "垂直位移",
        type: "value",
        boundaryGap: [0, "10%"],
        nameLocation: "end",
        alignTicks: true,
        nameTextStyle: {
          color: "#ffffff",
          //   align: "top",
          //   verticalAlign: "top",
          // verticalAlign: "",
          // padding: [-260, 0, 0, 0],
        },
        type: "value",
        axisLine: {
          show: true,
          lineStyle: {
            color: "#ffffff",
            width: 2,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "solid",
            color: "grey",
          },
        },
        axisLabel: {
          color: "#ffffff",
        },
      },
      //   {
      //     name: "垂直位移(mm)",
      //     nameLocation: "end",
      //     alignTicks: true,
      //     type: "value",
      //     nameTextStyle: {
      //       color: "#ffffff",
      //       //   align: "top",
      //       //   verticalAlign: "top",
      //       // padding: [-260, 0, 0, 0],
      //     },
      //     type: "value",
      //     axisLine: {
      //       show: true,
      //       lineStyle: {
      //         color: "#fff",
      //         width: 2,
      //       },
      //     },
      //     splitLine: {
      //       show: true,
      //       lineStyle: {
      //         type: "solid",
      //         color: "grey",
      //       },
      //     },
      //     axisLabel: {
      //       color: "#ffffff",
      //     },
      //   },
    ],
    series: [
      {
        name: "水平位移x",
        type: "line",

        symbol: "emptyCircle",
        showSymbol: true, //是否默认展示圆点
        areaStyle: {
          opacity: 0,
        },
        itemStyle: {
          normal: {
            color: "#5ADBE9", //改变折线点的颜色
          },
        },
        lineStyle: {
          width: 1,
          color: "#5ADBE9",
        },
        // emphasis: {
        //   focus: "series",
        // },
        // prettier-ignore
        data: [4,5,3,2,7,8,5,3,5,8,4,2,5,7,4,5,3,2,7,8,5,3,5,8,4,2,5,7,7,4,3],
      },
      {
        name: "水平位移y",
        type: "line",
        // yAxisIndex: 0,
        symbol: "emptyCircle",
        showSymbol: true, //是否默认展示圆点
        areaStyle: { opacity: 0 },
        itemStyle: {
          normal: {
            color: "#EC8A09", //改变折线点的颜色
          },
        },
        lineStyle: {
          width: 1,
          color: "#EC8A09",
        },
        // emphasis: {
        //   focus: "series",
        // },
        data: [
          15, 42, 45, 12, 35, 34, 13, 45, 12, 15, 13, 56, 34, 15, 42, 45, 12,
          35, 34, 13, 45, 12, 15, 13, 56, 34, 32, 14, 23, 42, 15,
        ],
      },
    ],
  },
});
const closeshow = () => {
  Isshow.value = false;
};
ue.interface.Isshowbxjcy = function (val) {
  Isshow.value = true;
  data.code = val;
  (data.value1 = [
    moment().format("YYYY-MM-DD"),
    moment().format("YYYY-MM-DD"),
  ]),
    getshenyaji();
};
onMounted(() => {
  // getshenyaji();
});
function getshenyaji() {
  getbxjcY({
    // type: data.select,
    size: -1,
    zh: data.code,
    startTime: data.value1[0],
    endTime: data.value1[1],
  }).then((res) => {
    // console.log(res.data.records, "y");
    if (res.data.records.length == 0) {
      datashow.value = false;
    } else {
      datashow.value = true;
      let datearr = [];
      let date = getEachDay(new Date(data.value1[0]), new Date(data.value1[1]));
      // console.log(date);
      date.forEach((date) => {
        // console.log(date.toISOString().split("T")[0]);
        datearr.push(date.toISOString().split("T")[0]);
      });
      data.dataSource.xAxis[0].data = datearr;
      data.dataSource.legend.data = [
        ...new Set(res.data.records.map((obj) => obj.bh)),
      ];
      // console.log(data.dataSource.legend.data);
      data.dataSource.legend.data.forEach((item, index) => {
        data.dataSource.series[index] = {
          name: item,
          type: "line",

          symbol: "emptyCircle",
          showSymbol: true, //是否默认展示圆点
          areaStyle: {
            opacity: 0,
          },
          itemStyle: {
            normal: {
              // color: "#5ADBE9", //改变折线点的颜色
            },
          },
          lineStyle: {
            width: 1,
            // color: "#5ADBE9",
          },
          // emphasis: {
          //   focus: "series",
          // },
          // prettier-ignore
          data: (res.data.records.filter((el,n)=>el.bh==item)).map((a,b)=>a.cxl),
        };
      });
    }

    // data.dataSource.series[0].data = res.data.records.map((item) => item.x);
    // data.dataSource.series[1].data = res.data.records.map((item) => item.y);
  });
  // getbxjcY({
  //   // type: data.select,
  //   size: -1,
  //   zh: data.code,
  //   startTime: data.value1[0],
  //   endTime: data.value1[1],
  // }).then((res) => {
  //   console.log(res, "y");

  //   // data.dataSource.xAxis[0].data = res.result.map((item) => item.time);
  //   // data.dataSource.series[0].data = res.result.map((item) => item.pressure);
  //   // data.dataSource.series[1].data = res.result.map((item) => item.temperature);
  // });
}
const resetview = () => {
  getshenyaji();
};

function getEachDay(startDate, endDate) {
  let currentDate = new Date(startDate);
  let dates = [];

  while (currentDate <= endDate) {
    dates.push(new Date(currentDate));
    currentDate.setDate(currentDate.getDate() + 1);
  }

  return dates;
}
</script>

<style lang="scss">
.bgbg {
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  z-index: 999;
  .z4 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 450.37px;
    background: url("@/assets/image/z4(1).png") 0px no-repeat;
    background-size: cover;
    color: white;
    padding-left: 17px;
    box-sizing: border-box;
    z-index: 99999;
    .closediv {
      position: absolute;
      top: 5px;
      right: 5px;
      width: 15px;
      height: 15px;
      // border: 1px solid red;
      cursor: pointer;
    }
    .title {
      font-family: "Source Han Sans CN";
      font-weight: bold;
      font-size: 14px;
      color: #ffffff;
      // line-height: 25px;
      // text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .bodyt {
      width: 100%;
      height: 419.29px;
      position: absolute;
      top: 30px;
      left: 0px;
      .time {
        position: absolute;
        top: 0px;
        left: 0px;
        display: flex;
        //   border: 1px solid red;
        .select {
          margin-top: 21px;
          margin-left: 64px;
          color: #ffffff;
        }
        .date {
          margin: 21px 40px 0px 20px;
        }
        .el-button {
          color: #ffffff;
          margin-top: 21px;
        }
      }
      .echarts {
        position: absolute;
        top: 80px;
        width: 100%;
        height: 338px;
        //   border: 1px solid red;
      }
    }
  }
}
.bgbg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: rgba(0, 0, 0, 0.5); /* 遮罩层颜色和透明度 */
}
::v-deep {
}
</style>